<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            list-style: none;
         
           margin: 10px;
           

        }
        .li{
           width:300px;
           height:30px;
           background-color: paleturquoise;
           padding:50px;
           text-align: center;

        }
        hr{
            height: 15px;
        }
        .classA{
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in sites">
              <div class="li" v-on:click='fn(index)' v-bind:class="[item.falg? 'classA': 'classB']"> {{ item.name }}&nbsp;&nbsp;&nbsp;&nbsp;{{item.zs}}</div>
            
            </li>
            
        </ul>
        <hr>
        <p>Total:{{bool}}</p>
        </div>
       
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            var vm=new Vue({
                el:'#app',
                data:{
                  bool:0,
                  to:0,

                 
    
                    sites:[
                        {name:'Web Decelopment',falg:false,zs:3000},
                        {name:'Python',falg:false,zs:1000},
                        {name:'java',falg:false,zs:2000},
                        {name:'GO',falg:false,zs:2200},
                       
                    ],
                  

                },
                methods:{
                    fn:function(number){
                       for(var i=0;i<this.sites.length;i++){
                            if(number==i){
                                this.sites[i].falg=!this.sites[i].falg;
                                if(this.sites[i].falg===true){
                                    this.bool+=this.sites[i].zs
                                 
                                }else{
                                    this.bool-=this.sites[i].zs
                                }

                          }
                       }
                    }
                }
            })
        </script>
</body>
</html>